<template>
  <div>
    <h2>自定义指令</h2>
    <p v-color='c'>hello worid</p>
    <input type="text" v-focus>

    <hr />
    <my-test :uname='uname'></my-test>
  </div>

</template>

<script>
import MyTest from './components/MyTest.vue'
export default {
  components: { MyTest },
  data() {
    return {
      c:'red',
      uname:'zhangsan'
    }
  },
  //自定义指令
  directives:{
    // 指令：{
       //el 表示使用这个指令的元素 obj.value 表示指令的值
      // bind(el,obj) {},     //只会执行一次，可以在里面对元素进行样式的的设置
      // inserted(el,obj) {},    //只会执行一次，，可以在里面对元素进行行为操作：比如让元素获取焦点
      // update(el,obj) {},      //数据更新后，子组件的页面不一定会更新 他会执行
      // componentUpdated(el,obj) {},  //数据更新后，包括子组件页面也更新，他会执行
      // unbind(el,obj) {},  //指令解绑的时候（组件销毁），他执行
    // },
    // 指令 (el,obj) {}  // 这个函数写法，如果他只有bind和update方法，并且两个方法一样，可以简写成函数

    color:{
      bind(el,obj) {
    //     // console.log(el,obj)
        el.style.color = obj.value
      },
      update (el,obj) {
        el.style.color = obj.value
      }
    },

    // color (el,obj) {
    //   el.style.color =obj.value
    // },

    focus: {
      inserted(el) {
        el.focus()
      }
    }
  }
}
</script>

<style>

</style>